<template>
  <Modal v-model="status"
         :mask-closable="false"
         @on-ok="newLog"
         @on-cancel="hide"
         title="河长工作汇报"
         width="800">
    <Tabs v-model="currentTab"
          @on-click="changeTab">
      <TabPane label="新建工作汇报"
               name="新建工作汇报">
        <Form ref="JReportForm"
              :model="model"
              :rules="rules"
              :label-width="60">
          <Form-item label="标题"
                     prop="title">
            <Select v-model="model.title"
                    @on-change="showType"
                    clearable
                    class="width90">
              <Option v-for="item in taskData"
                      :value="item.title"
                      :key="item.title">{{ item.title }}</Option>
            </Select>
          </Form-item>
          <Form-item label="内容"
                     prop="content">
            <Input type="textarea"
                   :maxlength="500"
                   v-model="model.content" />
          </Form-item>
          <Form-item label="类型"
                     prop="type">
            <RadioGroup v-model="model.type">
              <Radio disabled
                     label="0">简报</Radio>
              <Radio disabled
                     label="1">总结</Radio>
            </RadioGroup>
          </Form-item>
        </Form>
      </TabPane>
      <TabPane label="我的工作汇报"
               name="我的工作汇报">
        <Table ref="table"
               :data="logData"
               :columns="columns"
               stripe
               style="margin-bottom:10px">
          <template slot-scope="{ row }"
                    slot="action">
            <Button type='error'
                    size='small'
                    @click="delLog(row)">删除</Button>
          </template>
        </Table>
        <Page :total="total"
              :current="page"
              size="small"
              show-total
              style="display:flex;justify-content:center"
              @on-change="getLogData" />
      </TabPane>
    </Tabs>
    <div slot="footer">
      <Button v-if="currentTab==='新建工作汇报'"
              type="primary"
              @click="newLog">确定</Button>
      <Button type="text"
              @click="hide">取消</Button>
    </div>
  </Modal>
</template>

<script>
import { reqPost } from 'global/axios';

export default {
  data() {
    return {
      status: false,
      page: 1,
      total: 0,
      currentTab: '新建工作汇报',
      taskData: [],
      logData: [],
      rules: {
        title: [
          {
            required: true,
            message: '请选择标题',
            trigger: 'change',
          },
        ],
        content: [
          {
            required: true,
            message: '请输入内容',
            trigger: 'blur',
          },
        ],
      },
      model: {
        title: '',
        content: '',
        type: '',
        task_no: '',
      },
      columns: [
        {
          title: '标题',
          key: 'title',
        },
        {
          title: '内容',
          key: 'content',
          width: 400,
        },
        {
          title: '类型',
          key: 'typeTest',
        },
        {
          title: '操作',
          slot: 'action',
        },
      ],
    };
  },

  methods: {
    async show() {
      this.status = true;
      await this.getTaskData();
    },

    async getTaskData() {
      let { result } = await reqPost({
        url: '/bus/journal/tasking',
      });
      this.taskData = result;
    },

    async getLogData(page = 1) {
      let res = await reqPost({
        data: {
          searchValue: {},
          page,
          pageSize: 10,
          order: { date_time: -1 },
        },
        url: '/bus/journal/myjournal',
      });

      if (res.status) {
        let { result, totalSize } = res.result;
        this.logData = result.map(item => {
          switch (item.type) {
            case '0':
              item.typeTest = '简报';
              break;
            case '1':
              item.typeTest = '总结';
              break;
            default:
              item.typeTest = '暂无数据';
              break;
          }
          return item;
        });
        this.total = totalSize;
      }
    },

    changeTab(data) {
      this.currentTab = data;
      if (data === '我的工作汇报') {
        this.getLogData();
      } else {
        this.total = 0;
        this.page = 1;
        this.resetForm();
      }
    },

    resetForm() {
      this.model = {
        title: '',
        content: '',
        type: '',
        task_no: '',
      };
      this.$refs.JReportForm.resetFields();
      this.getTaskData();
    },

    showType(title) {
      if (title) {
        let { task_no, type } = this.taskData.find(item => {
          return item.title === title;
        });
        this.model.task_no = task_no;
        this.model.type = type;
      } else {
        this.model.task_no = '';
        this.model.type = '';
      }
    },

    async newLog() {
      this.$refs.JReportForm.validate(async valid => {
        if (valid) {
          let res = await reqPost({
            data: this.model,
            url: '/bus/journal/new',
          });

          this.$Message[res.status ? 'success' : 'warning']({
            content: res.message,
          });
          res.status && this.hide();
        }
      });
    },

    async delLog(row) {
      let res = await reqPost({
        data: {
          _id: row._id,
        },
        url: '/bus/journal/del',
      });

      let { status, message } = res;
      this.$Message[status ? 'success' : 'warning']({
        content: message,
      });

      if (status) {
        this.page = 1;
        this.getLogData();
      }
    },

    hide() {
      this.page = 1;
      this.total = 0;
      this.logData = [];
      this.taskData = [];
      this.currentTab = '新建工作汇报';
      this.resetForm();
      this.status = false;
    },
  },
};
</script>